<template>
  <!-- <div class="grid items-center gap-4 mb-4">
    <Label for="postUrl">
      {{ t("Post URL") }}
    </Label>
    <Input
      id="postUrl"
      name="webhookURL"
      v-model="pageData.webhookURL"
      type="url"
      @change="updateValueFn"
      required
    />
  </div> -->

  <FormField
    v-slot="{ componentField, handleBlur, handleChange, errors }"
    name="webhookURL"
  >
    <FormItem class="mb-4">
      <FormLabel>{{ t("Post URL") }}</FormLabel>
      <FormControl>
        <Input
          type="url"
          :placeholder="t('Post URL')"
          v-bind="componentField"
          @change="(e: any) => {
            updateUrlFn(e.target.value);
            handleChange(e);
          }"
          @blur="handleBlur"
          :class="errors && errors.length ? '!outline-red-500' : ''"
        />
      </FormControl>
      <FormMessage />
    </FormItem>
  </FormField>
  <FormField
    v-slot="{ componentField, handleBlur, handleChange }"
    name="webhookContentType"
  >
    <FormItem class="mb-4">
      <FormLabel>{{ t("Request Body") }}</FormLabel>
      <FormControl>
        <Select
          id="requestBody"
          v-bind="componentField"
          @update:modelValue="
            (e) => {
              updateContentType(e);
              handleChange(e);
            }
          "
          @blur="handleBlur"
        >
          <SelectTrigger>
            <SelectValue :placeholder="t('Request Body')" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="json">{{
              t("webhookBodyPresetOption", ["application/json"])
            }}</SelectItem>
            <SelectItem value="form-data">{{
              t("webhookBodyPresetOption", ["multipart/form-data"])
            }}</SelectItem>
            <SelectItem value="custom">{{
              t("webhookBodyCustomOption")
            }}</SelectItem>
          </SelectContent>
        </Select>
        <p
          class="text-xs opacity-85"
          v-show="pageData.webhookContentType === 'json'"
        >
          {{ t("webhookJsonDesc", ['"application/json"']) }}
        </p>
        <p
          class="text-xs opacity-85"
          v-show="pageData.webhookContentType === 'form-data'"
        >
          {{
            t("webhookFormDataDesc", [
              '"multipart/form-data"',
              "json_decode($_POST['data'])",
            ])
          }}
        </p>
        <div
          class="text-xs opacity-85"
          v-show="pageData.webhookContentType === 'custom'"
        >
          <Translation
            tag="p"
            keypath="liquidIntroduction"
            class="text-xs opacity-85 mb-2"
          >
            <a href="https://liquidjs.com/" target="_blank" class="break-words underline hover:text-primary">{{ t("documentation") }}</a>
          </Translation>
          <Textarea
            id="customBody"
            name="webhookCustomBody"
            v-model="pageData.webhookCustomBody"
          ></Textarea>
        </div>
      </FormControl>
      <FormMessage />
    </FormItem>
  </FormField>
  <!-- <div class="grid items-center gap-4 mb-4">
    <Label for="requestBody">
      {{ t("Request Body") }}
    </Label>
    <Select
      id="requestBody"
      @update:modelValue="updateContentType"
    >
      <SelectTrigger>
        <SelectValue :placeholder="t('Request Body')" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="json">{{
          t("webhookBodyPresetOption", ["application/json"])
        }}</SelectItem>
        <SelectItem value="form-data">{{
          t("webhookBodyPresetOption", ["multipart/form-data"])
        }}</SelectItem>
        <SelectItem value="custom">{{
          t("webhookBodyCustomOption")
        }}</SelectItem>
      </SelectContent>
    </Select>
    <p
      class="text-xs opacity-85"
      v-show="pageData.webhookContentType === 'json'"
    >
      {{ t("webhookJsonDesc", ['"application/json"']) }}
    </p>
    <p
      class="text-xs opacity-85"
      v-show="pageData.webhookContentType === 'form-data'"
    >
      {{
        t("webhookFormDataDesc", [
          '"multipart/form-data"',
          "json_decode($_POST['data'])",
        ])
      }}
    </p>
    <div
      class="text-xs opacity-85"
      v-show="pageData.webhookContentType === 'custom'"
    >
      <Translation
        tag="p"
        keypath="liquidIntroduction"
        class="text-xs opacity-85 -mt-2 mb-2"
      >
        <a href="https://liquidjs.com/" target="_blank" class="break-words underline hover:text-primary">{{ t("documentation") }}</a>
      </Translation>
      <Textarea
        id="customBody"
        name="webhookCustomBody"
        v-model="pageData.webhookCustomBody"
      ></Textarea>
    </div>
  </div> -->


  <!-- <div>
    <span class="text-xs opacity-85">{{ t("webhookAdditionalHeadersDesc") }}</span>
  </div> -->
</template>

<script setup lang="ts">
import { Input } from "@/components/ui/input";
// import { Label } from "@/components/ui/label";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import {
  FormControl,
  // FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "@/components/ui/form";
import { ref, onMounted } from "vue";

import { useI18n, Translation } from "vue-i18n";

const { t } = useI18n();

const props = defineProps({
  data: {
    type: Object,
    default: () => ({
      webhookURL: "",
      webhookContentType: "",
      webhookCustomBody: "",
    }),
  },
});

const pageData = ref(props.data);

const emits = defineEmits(["update"]);

const updateUrlFn = (value: string) => {
  pageData.value.webhookURL = value;
  updateValueFn();
};
const updateContentType = (value: string) => {
  pageData.value.webhookContentType = value;
  updateValueFn();
};

export interface PageData {
  webhookURL: string;
  webhookContentType: string;
  webhookCustomBody?: string;
}

const updateValueFn = () => {
  const payload: PageData = {
    webhookURL: pageData.value.webhookURL,
    webhookContentType: pageData.value.webhookContentType,
  }
  if (pageData.value.webhookContentType === "custom") {
    payload.webhookCustomBody = pageData.value.webhookCustomBody;
  }
  emits("update", payload);
};

onMounted(() => {
  updateValueFn();
});
</script>
